<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="text/html;charset=utf-8">
    <title>成为实践星用户</title>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">

    <script crossorigin="anonymous"
            integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
            src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script crossorigin="anonymous"
            integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
    <script crossorigin="anonymous" src="https://kit.fontawesome.com/487e95a78d.js"></script>
    <script crossorigin="anonymous" src="/js/jquery.min.js"></script>
</head>

<body>
<header>
    <nav class="navbar navbar-expand navbar-dark flex-column flex-md-row">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand d-flex w-50 mr-auto" href="#" th:href="@{/}">实践星</a>
                <button class="navbar-toggler" data-target="#collapsingNavbar3" data-toggle="collapse"
                        type="button">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
                <ul class="navbar-nav w-100 justify-content-begin">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <a class="nav-link" th:href="@{/logout}">退出</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                    <li class="nav-item" sec:authorize="isAuthenticated()">
                        <span style="color: #fff;">登录时间：<span th:text="${loginTime}"/></span>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<div class="container">
    <div class="main">
        <section class="signup">
            <div class="form-container">
                <div th:if="${param.success}">
                    <div class="alert alert-info">你已经成为实践星的一员！！！赶快
                        <u>
                            <a href="/" th:href="@{/login}">登录</a>
                        </u>

                        吧~
                    </div>
                </div>
                <div class="signup-content">
                    <div class="signup-form">
                        <h2 class="form-title">注册实践星</h2>
                        <!-- <form method="POST" class="register-form" id="register-form"> -->
                        <form class="register-form" method="POST" th:action="@{/registration}" th:object="${user}">
                            <div class="form-group">
                                <label for="name"><i class="fa-solid fa-user"></i></label>
                                <input id="name" name="name" placeholder="姓名" required th:field="*{name}"
                                       type="text">
                            </div>
                            <p class="text-danger" th:errors="*{name}" th:if="${#fields.hasErrors('name')}">
                            </p>

                            <div class="form-group">
                                <label for="email"><i class="fa-solid fa-envelope"></i></label>
                                <input id="email" name="email" placeholder="电子邮箱" required th:field="*{email}"
                                       type="email">
                            </div>
                            <p class="text-danger" th:errors="*{email}" th:if="${#fields.hasErrors('email')}"></p>

                            <div class="form-group">
                                <label for="password"><i class="fa-solid fa-lock"></i></label>
                                <input id="password" name="password" placeholder="密码" required th:field="*{password}"
                                       type="password">
                            </div>
                            <p class="text-danger" th:errors="*{password}" th:if="${#fields.hasErrors('password')}">
                            </p>

                            <div class="form-group">
                                <input class="agree-term" id="agree-term" name="agree-term" type="checkbox">
                                <label class="label-agree-term" for="agree-term">
                                    <span class="checkbox_checked_span">✓<span></span></span>
                                    同意<a class="term-service" href="#"
                                         style="text-decoration: none;">《服务条款》</a></label>
                            </div>
                            <div class="form-group form-button">
                                <input class="btn btn-primary" id="signup" name="signup" type="submit" value="立即注册">
                            </div>
                        </form>
                    </div>
                    <div class="signup-image">
                        <figure><img alt="sing up image" src="/images/signup.jpg"></figure>
                        <a class="signup-image-link" href="/" th:href="@{/login}">已有实践星帐户</a>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
</body>

</html>